<template>
    <div v-show="showPhoneVerify">
        <img class="loading-img" src="../../../assets/images/loading.gif" alt=""/>
        <!--手机号码验证弹窗开始-->
        <div v-show="showPhoneVerify" class="js_comBlack hide_com_buy com_black" @click="cancel_phoneAlert()"></div>
        <div v-show="showPhoneVerify" class="js_phoneVerify_alert comafter luo-phoneVerify-alert">
            <div class="luo-phoneVerify-alert-info">
                <img class="img-responsive" src="../../../assets/images/phoneVerify-alertBg.png" alt="">
                <img class="icon-closeBtn-phoneVerify" src="../../../assets/images/icon-closeBtn-phoneVerify.png"
                     @click="cancel_phoneAlert()" alt="">

                <div class="groupCard-userName-alert-input">
                    <div class="js_comverify flex-row partner-input-groupR">
                        <div class="lqy-input-wrap flex-data">
                            <input placeholder="输入手机号码"
                                   @keyup="Verify.phone_verify($event)"
                                   @blur="Verify.phone_verify($event) "
                                   aria-invalid="true" class="js_phone js_input"
                                   type="tel">
                        </div>
                        <div class="partner-closeBtn"><img class="js_closeBtn img-responsive" style="display: none"
                                                           src="../../../assets/images/partner_iconClose.png" alt=""></div>
                    </div>
                    <div class="flex-row partner-input-groupR luo-phoneVerify-getCode" style="padding: 0">
                        <div class="js_comverify flex-row" style="border-radius: 5px;flex: 1;">
                            <div class="flex-data lqy-input-wrap">
                                <input @keyup="Verify.verify_code01($event)"
                                       @blur="Verify.verify_code01($event)"
                                       id="verify" aria-invalid="true"
                                       placeholder="输入验证码"
                                       class="js_input retail-register-phone-input retail-register-vertfy-input"
                                       type="tel">
                            </div>
                            <div class="partner-closeBtn">
                                <img class="js_closeBtn img-responsive" style="display: none"
                                     src="../../../assets/images/partner_iconClose.png" alt="">
                            </div>
                        </div>
                        <input type="button" @click="getVerify($event);"
                               class="js_getVerify disabled partner-input-verify-btn"
                               value="获取验证码">
                    </div>
                    <div class="procuer-get-code js_procuer_getCode procuer-get-code2" style="display: none"><span
                            class="procuer-not-have-code">收不到验证码?</span><span class="procuer-click-get-code">点击获取</span><span
                            class="procuer-get-voice" id="procuer-get-voice" @click="pGetVoice">语音验证码</span></div>
                    <div class="procuer-get-code1 procuer-get-code3" style="display: none;">
                        <span>电话快来了，请留意来自</span><span
                            class="procuer-phone">12590-XXXX</span>的电话
                    </div>

                    <div @click="js_submit($event);" class="js_submit luo-partner-submitBtn disabled">确定</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>

    import $ from 'jquery'
    import xurl from '../../../x/xurl'
    import XTrade from '../../../x/XTrade'
    import XCookie from '../../../x/XCookie'
    import Verify from '../../../../static/js/Verify'
    import loginVerify from '../../../../static/js/loginVerify'

    export default {
        props: {
            showPhoneVerify: {type: Boolean}
        },
        data() {
            return {
                Verify: Verify,
                voice_i: 60,
                timer: ''
            }
        },
        mounted: function () {

        },
        methods: {
            cancel_phoneAlert: function () {//关闭弹窗
                this.$emit('phoneVerify')
            },
            getVerify: function (event) { //点击获取验证码判断：手机号码格式是否正确/是否已申请过/是否是达人
                loginVerify.popVoiceCode();
                let _this = $(event.target);
                var phone = $(".js_phone").val();
                if (phone == '' || phone.length != 11 || !(/^1\d{10}$/.test(phone))) {
                    $(".js_collect_text").text("请输入正确的手机号!");
                    loginVerify.input_alert();
                    return;
                }
                if (!$(_this).hasClass("disabled")) {
                    var phone = $(".js_phone").val();
                    loginVerify.time(_this);
                    xurl.put(this.PG_H5_API_vue + "/register/code/send/phone/" + phone).then(data => {
                        if ((data.success)) {
                            $(".js_phone").attr("aria-invalid", "false");//当手机号码格式正确满足时
                            //点击获取验证码时语音显示出来
                            $('.js_procuer_getCode').show();
                        }
                    })
                }
            },
            js_submit: function (event) {
                let obj = $(event.target);
                let that = this;
                if (!$(obj).hasClass("disabled")) {
                    var code = $("#verify").val();
                    if (code.length != 6) {
                        this.$root.$emit('toast', {msg: '验证码不正确或已过期'});
                    } else {
                        var phoneVal = $(".js_phone").val();
                        xurl.putSync(that.PG_H5_API_vue + "/register/code/check/phone/" + phoneVal + "/" + code).then(data => {
                            if (data.success) {
                                //执行绑定
                                xurl.postLoading(that.PG_H5_API_vue + "/ajax/do/binding/phone?phone=" + phoneVal).then(data => {
                                    if (data.success) {
                                        XTrade.updateConfirmProcureParam4Delivery()
                                        loginVerify.cancel_phoneAlert(); //关闭弹框
                                        location.reload();//刷新页面
                                    } else {
                                        this.$root.$emit('toast', {msg: data.errMsg});
                                    }
                                })
                            } else {
                                this.$root.$emit('toast', {msg: '验证码不正确或已过期'});
                            }
                        })
                    }
                }
            },
            pGetVoice: function () {
                var _this = this;
                if (_this.voice_i == 60) {
                    var phone = $(".js_phone").val();
                    //发送语音验证码
                    xurl.put(this.PG_H5_API_vue + "/voice/code/send/phone/" + phone).then(data => {
                        if (data.success) {
                            $('.procuer-get-code1').show();
                        } else {
                            $(".js_collect_text").text(data.errMsg);
                            loginVerify.input_alert();
                        }
                    })
                }
                clearInterval(_this.timer);
                _this.timer = setInterval(function () {
                    _this.voice_i--;
                    if (_this.voice_i <= 0) {
                        _this.voice_i = 60;
                        clearInterval(timer);
                    }
                }, 1000);
                if (_this.voice_i > 0 && _this.voice_i < 60) {
                    $(".js_collect_text").text("每60秒一次，请稍后再试");
                    loginVerify.input_alert();
                }
            }
        }
    }
</script>
<style scoped>
    .loading-img {
        display: none;
    }
</style>
